<template>
    <div class="wrong-question-content">
        <div class="left">

            <el-skeleton :loading='leftLoading' animated>
                <div class="screen">
                    <ul>
                        <li class="screen-li"
                            v-for="(item, idx) in studentList"
                            :class="{ 'is_active': searchParams.studentId == item.id}" :key="item"
                            @click="screenClick(item, idx)">
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                    <cus-empty v-if="!studentList.length"></cus-empty>
                </div>
            </el-skeleton>
        </div>
        <div class="right">
            <div class="search">
                <!-- <div>

                    <el-select v-model="searchParams.difficult" placeholder="请选择难度" size="small"
                               @change="searchQuestion" clearable>
                        <el-option v-for="item in difficultyList" :key="item" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </div> -->

                <div class="time-range">
                    <span style="margin-right: 10px">时间范围</span>
                    <el-date-picker
                            v-model="searchParams.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            :shortcuts="shortcuts"
                            @change="timeChange"
                            unlink-panels>
                    </el-date-picker>
                </div>
            </div>
            <div class="content-main">

                <QuestionListComponents :searchParams="searchParams" ref="listRef"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import {reactive, ref, onMounted, watch, computed, nextTick} from 'vue'
    import {useStore} from 'vuex';
    import QuestionListComponents from './question-list.vue'
    import $ from '$'
    import Moment from 'moment'

    interface SearchParams {
        date: Array<string>;
        startDate: string; //开始时间默认三个月前
        endDate: string;
        answerResult: number;
        subjectId: string;
        studentId: string;
        difficult: string;
    }

    export default {
        components: {QuestionListComponents},
        setup(props) {
            let leftLoading = ref(true)
            let store = useStore();
            let shortcuts = ref([
                {
                    text: '最近一周',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    })(),
                }, {
                    text: '最近一个月',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    })(),
                }, {
                    text: '最近三个月',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        return [start, end]
                    })(),
                }])
            let difficultyList = ref([
                {name: "易", id: 11},
                {name: "较易", id: 12},
                {name: "中档", id: 13},
                {name: "较难", id: 14},
                {name: "难", id: 15},
            ]);
            let studentList = ref([]);
            let searchParams: SearchParams = reactive({
                date: [Moment(new Date().getTime() - 3600 * 1000 * 24 * 90).format("YYYY-MM-DD"), Moment().format("YYYY-MM-DD")],
                startDate: Moment(new Date().getTime() - 3600 * 1000 * 24 * 90).format("YYYY-MM-DD"), //开始时间默认三个月前
                endDate: Moment().format("YYYY-MM-DD"),
                answerResult: 0,
                subjectId: '',
                studentId: '',
                difficult: ''
            });
            let listRef = ref();
            let subjectId = computed(() => store.getters.subject.code)

            //学科变化请求数据
            watch(subjectId, (val) => {
                searchParams.subjectId = val;
                nextTick(() => {
                    if(searchParams.studentId){
                        listRef.value.request(searchParams, true)
                    }
                })
            })

            const timeChange = (val: string[]) => {
                searchParams.startDate = Moment(val[0]).format("YYYY-MM-DD");
                searchParams.endDate = Moment(val[1]).format("YYYY-MM-DD");
                listRef.value.request(searchParams, true)
            };


            const searchQuestion = () => {
                listRef.value.request(searchParams, true)
            };

            const screenClick = (item: any) => {
                // let {userId} = item;
                searchParams.studentId =  item.id;
                // searchParams.studentId = userId === searchParams.studentId ? '' : userId;
                listRef.value.request(searchParams, true)
            };

            const getStudentList = (id) => {
                studentList.value = []
                $.http.post(`/lessonPlan/queryStudents?size=100000&current=1&storeId=${id}`).then(res => {
                    if (res.result) {
                        leftLoading.value = false
                        studentList.value = res.json
                        searchParams.studentId = res.json[0].id
                        listRef.value.request(searchParams, true)
                    }
                })
            };


            onMounted(() => {
                $.emitter.emit('effect', (id) => {
                    searchParams.subjectId = id
                })
            });

            return {
                studentList, leftLoading, shortcuts, searchParams, difficultyList, listRef,
                timeChange, searchQuestion, screenClick, getStudentList
            }
        }
    }
</script>
<style lang="scss" scoped>
    .wrong-question-content {
        padding: 20px;
        display: flex;
        height: 100%;

        .left {
            height: 100%;
            overflow: auto;
            min-width: 210px;
            width: 210px;
            border: 1px solid $--border-color-base;
            border-radius: 6px 6px 0 0;

            .screen {
                .screen-li {
                    padding: 17px 15px;

                    &:first-of-type {
                        border-radius: 6px 6px 0 0;
                    }

                    &:hover {
                        background: #DBDEE5;
                        cursor: pointer;
                    }

                    span {
                        overflow: hidden;
                        word-break: break-all;
                    }
                }
            }
        }

        .right {
            margin-left: 20px;
            width: calc(100% - 215px);

            .search {
                display: flex;

                & > div {
                    margin-left: 20px;

                    &:first-of-type {
                        margin-left: 0;
                    }
                }

                .time-range {
                    min-width: 200px;
                    display: flex;
                    align-items: center;

                    & > span {
                        min-width: 60px;
                    }
                }

                .time-radio {
                    min-width: 200px;
                }
            }

            .content-main {
                height: calc(100% - 46px);
            }
        }

        :deep(.cus__skeleton__container) {
            height: 100%;
            overflow: auto;
            border: 1px solid $--border-color-base;
        }

        .is_active {
            background: $--color-primary !important;
            color: #fff !important;
        }
    }
</style>
